<template>
  <div :class="{'upload-photos-layout':uploadStyle == 2,'upload-photos-layout2':uploadStyle == 3}">
    <div class="images-layout">
      <div class="img-layout" v-for="(item,index) in list">
        <img class="res-image" :src="item.image">
        <span class="el-upload-list__item-actions">
          <a class="el-upload-list__item" @click="showDaImage(item.image)"><i class="el-icon-zoom-in"></i></a>
          <template v-if="uploadStyle == '2'">
              <a class="el-upload-list__item" @click="leftOrder(index)"><i class="el-icon-back"></i></a>
              <a class="el-upload-list__item" @click="rightOrder(index)"><i class="el-icon-right"></i></a>
          </template>
          <template v-if="uploadStyle == '3'">
              <a class="el-upload-list__item" @click="leftOrder(index)"><i class="el-icon-top"></i></a>
              <a class="el-upload-list__item" @click="rightOrder(index)"><i class="el-icon-bottom"></i></a>
          </template>
          <!--                    <a class="el-upload-list__item" @click="downloadImage(item.image)"><i class="el-icon-download"></i></a>-->
          <a class="el-upload-list__item"
             @click="onDeleteImageClick(item,index)"><i
            class="el-icon-delete"></i></a>
        </span>
      </div>

      <div class="up-btn-layout">
        <upload-oss-btn ref="upload"
                        :uploadStyle="2"
                        :multiple="multiple"
                        :queryParams="queryParams"
                        :btn-text="btnText"
                        :uploadFun="uploadFun"
                        :width="upViewWidth"
                        :height="upViewHeight"
                        :remark="remark"
                        @onUploadResult="onUploadResult"/>
      </div>
    </div>

    <el-dialog
      append-to-body
      :visible.sync="dialogImageVisible" width="50%">
      <div class="image-dialog-layout">
        <img class="da-image" :src="showImage">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { uploadOss } from '@/api/common'
  import UploadOssBtn from '@/components/UploadOssBtn'

  export default {
    name: 'UploadPhotoView',
    components: { UploadOssBtn },
    props: {
      autoAddDelete: {
        type: Boolean,
        default: true
      },
      queryParams: {
        type: Object,
        default: null
      },
      btnText: {
        type: String,
        default: '点击上传'
      },
      remark: {
        type: String,
        default: ''
      },
      multiple: {
        type: Boolean,
        default: false
      },
      uploadStyle: {
        type: Number,
        default: 2
      },
      uploadFun: {
        type: Function,
        default: uploadOss
      },
      upViewWidth: {
        type: Number,
        default: 120
      },
      upViewHeight: {
        type: Number,
        default: 120
      }
    },
    data() {
      return {
        showImage: null,
        dialogImageVisible: false,
        list: []
      }
    },
    created() {
    },
    methods: {
      setList(list) {
        this.list = list != null ? list : []
      },
      getList() {
        return this.list
      },
      addData(item) {
        item.sort = this.list.length
        this.list.push(item)
      },
      onUploadResult(data) {
        if (this.autoAddDelete == true) {
          this.list.push({ id: null, image: data, sort: this.list.length })
        } else {
          this.$emit('onUploadResult', data)
        }
      },
      leftOrder(index) {
        let list = this.list
        //提升排序
        if (list.length <= 0 || index <= 0) {
          return
        }
        let item = list[index]
        list.splice(index, 1)
        list.splice(index - 1, 0, item)
      },
      rightOrder(index) {
        let list = this.list
        //降低排序
        if (list.length <= 0 || index > list.length - 1) {
          return
        }
        let item = list[index]
        list.splice(index, 1)
        list.splice(index + 1, 0, item)
      },
      getImages() {
        let images = []
        for (let i = 0; i < this.list.length; i++) {
          images.push(this.list[i].image)
        }
        return images
      },
      downloadImage(item) {
        window.location.href = item
      },
      deleteImage(index) {
        this.list.splice(index, 1)
      },
      deleteImageById(id) {
        for (let i = 0; i < this.list.length; i++) {
          let item = this.list[i]
          if (item.id == id) {
            this.list.splice(i, 1)
            return
          }
        }
      },
      onDeleteImageClick(item, index) {
        if (this.autoAddDelete == true) {
          this.deleteImage(index)
        }
        this.$emit('onDeleteItem', item)
      },
      showDaImage(item) {
        this.showImage = item
        this.dialogImageVisible = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .upload-photos-layout {
    .images-layout {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .up-btn-layout {
        position: relative;
        margin-right: 5px;
        margin-bottom: 5px;
        line-height: normal !important;
        width: 122px;
        height: 122px;
      }

      .img-layout {
        position: relative;
        margin-right: 5px;
        margin-bottom: 5px;
        line-height: normal !important;
        border: 1px solid #c0ccda;
        width: 122px;
        height: 122px;
        border-radius: 6px;

        .res-image {
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }

        .el-upload-list__item-actions:hover {
          opacity: 255;
        }

        .el-upload-list__item-actions {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          cursor: default;
          text-align: center;
          color: #fff;
          opacity: 0;
          font-size: 20px;
          background-color: rgba(0, 0, 0, .5);
          transition: opacity .3s;
          border-radius: 6px;

          .el-upload-list__item {
            transition: all .5s cubic-bezier(.55, 0, .1, 1);
            line-height: 1.8;
            position: relative;
            box-sizing: border-box;
            border-radius: 4px;
            color: white;
            font-size: 20px;
            padding: 3px;
            margin: 2px;
          }
        }

        .el-upload-list__item-actions:after {
          display: inline-block;
          content: "";
          height: 100%;
          vertical-align: middle;
        }
      }
    }
  }

  .upload-photos-layout2 {
    .images-layout {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .up-btn-layout {
        position: relative;
        line-height: normal !important;
      }

      .img-layout {
        position: relative;
        line-height: 0px !important;
        width: 400px;

        .res-image {
          width: 100%;
          height: 100%;
          border-radius: 0px;
        }

        .el-upload-list__item-actions:hover {
          opacity: 255;
        }

        .el-upload-list__item-actions {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          cursor: default;
          text-align: center;
          color: #fff;
          opacity: 0;
          font-size: 20px;
          background-color: rgba(0, 0, 0, .5);
          transition: opacity .3s;

          .el-upload-list__item {
            transition: all .5s cubic-bezier(.55, 0, .1, 1);
            line-height: 1.8;
            position: relative;
            box-sizing: border-box;
            border-radius: 4px;
            color: white;
            font-size: 20px;
            padding: 3px;
            margin: 2px;
          }
        }

        .el-upload-list__item-actions:after {
          display: inline-block;
          content: "";
          height: 100%;
          vertical-align: middle;
        }
      }
    }
  }

  .image-dialog-layout {
    .da-image {
      width: 100%;
    }

    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
  }
</style>
